<template>
  <basic-container>
    <div v-show="showSearchFlag" class="flex-start m-t-20 m-b-10">
      <div class="flex-center">
        <div class="m-r-10">
          <search-product @select="search.productId=$event.ids"></search-product>
        </div>
        <div class="m-r-10">
          <search-product-group need-parent :parent-id="search.productId" @select="search.groupId=$event.ids"></search-product-group>
        </div>
        <div class="m-r-10">
          <search-online title="在线状态" @select="search.online=$event.ids"></search-online>
        </div>
        <el-input v-model="search.deviceName" class="m-r-10" placeholder="请输入" size="small"
                  style="width: 300px;">
          <el-button slot="append" :loading="loading" icon="el-icon-search" size="small" type="primary" @click="query">
            查询
          </el-button>
        </el-input>
      </div>
    </div>
    <div class="flex-center m-b-10">
      <div></div>
      <div class="flex-center">
        <el-button :loading="loading" circle icon="el-icon-refresh" @click="query"></el-button>
        <el-button circle icon="el-icon-search" @click="showSearchFlag=!showSearchFlag"></el-button>
        <el-button type="primary" @click="showAddFlag=true">新增设备</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="data" :header-cell-style="{background:'#eee',color:'#000'}" border
              class="my-table"
              style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="60"/>
      <el-table-column label="主板号" prop="price">
        <template v-slot="scope">{{ scope.row.deviceName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="所属产品" min-width="100">
        <template v-slot="scope">{{ scope.row.productName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="设备组">
        <template v-slot="scope">{{ scope.row.groupName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="固件版本" min-width="100">
        <template v-slot="scope">{{ scope.row.firmwareVersion | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="在线状态" min-width="100">
        <template v-slot="scope">
          <span v-if="scope.row.online === 1">在线</span>
          <span v-else-if="scope.row.online === 0">离线</span>
          <span v-else>{{ defaultValue }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后上线时间" min-width="120">
        <template v-slot="scope">{{ scope.row.lastOnlineTime | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button icon="el-icon-edit" size="small" type="text" @click="toDetail(scope.row)">查看</el-button>
          <el-button icon="el-icon-remove" size="small" type="text" @click="toRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination ref="paginationRef" :page-size="page.size" :total="total" class="m-t-20" @change="pageChange"/>
    <div class="h-100px"></div>

    <el-dialog :visible.sync="showAddFlag" append-to-body title="新增设备" width="500px">
      <el-form label-width="120px">
        <el-form-item label="所属产品">
          <search-product title="" width="200" @select="form.productId=$event.ids"></search-product>
        </el-form-item>
        <el-form-item label="所属设备组">
          <search-product-group title="" :need-parent="true" :parent-id="form.productId" width="200" @select="form.groupId=$event.ids"></search-product-group>
        </el-form-item>
        <el-form-item label="主板号">
          <el-input v-model="form.deviceName" size="small" style="width: 200px"/>
          <el-button class="m-l-5" type="text" @click="genCode('deviceName', 8, 1)">自动生成</el-button>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.deviceSecret" size="small" style="width: 200px"/>
          <el-button class="m-l-5" type="text" @click="genCode('deviceSecret', 10)">自动生成</el-button>
        </el-form-item>
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button size="small" @click="closeAddAndEdit">取消</el-button>
        <el-button :loading="submitLoading" size="small" type="primary" @click="doConfirm">确定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  equals,
  getRecords,
  getTotal,
  isListEmpty,
  isStringEmpty,
  msgError,
  isTrue,
  confirmWarning, msgSuccess
} from "@/util/common-util";
import AuthWrapper from "@/components/business/auth-wrapper";
import request from "@/router/axios";
import {deleteRecord} from "@/api/business/filling-team";
import SearchProduct from "@/components/SearchCondition/SearchProduct";
import SearchProductGroup from "@/components/SearchCondition/SearchProductGroup";
import {iotdevicePage, iotdeviceRemove, iotdeviceSubmit} from "@/api/product/mainboard";
import {getRandomCode} from "@/api/product/product";
import SearchOnline from "@/components/SearchCondition/SearchOnline";


export default {
  name: "BoardList",
  components: {SearchOnline, SearchProductGroup, SearchProduct, AuthWrapper, AppPagination},
  data() {
    return {
      page: {
        size: 20,
        current: 1
      },
      total: 0,
      searchDate: '',
      search: {
        deviceName: '',
        groupId: '', // 在线状态（1 在线 0离线）
        online: '',
        productId: '',
      },
      form: {
        productId: '',
        groupId: '',
        deviceName: '',
        deviceSecret: '',
      },
      showSearchFlag: true,
      loading: false,
      data: [{}],
      showAddFlag: false,
      submitLoading: false,
      isEdit: false,
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    genCode(key, length, isBig = 0) {
      getRandomCode({length, isBig}).then(res => {
        this.form[key] = res.data.data
      })
    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    refresh() {
      this.$refs.paginationRef.reset()
    },
    query() {
      this.loading = true
      iotdevicePage({...this.page, ...this.search}).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addNew() {
      this.showAddFlag = true
    },
    doConfirm() {
      if (isStringEmpty(this.form.productId)) return msgError("请选择产品")
      if (isStringEmpty(this.form.groupId)) return msgError("请选择设备组")
      if (isStringEmpty(this.form.deviceName)) return msgError("请输入主板号")
      if (isStringEmpty(this.form.deviceSecret)) return msgError("请输入密码")
      this.submitLoading = true
      iotdeviceSubmit(this.form).then(res => {
        this.submitLoading = false
        this.page.current = 1
        this.query()
        this.closeAddAndEdit()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    toDetail(row) {
      this.$emit('detail', row)
    },
    closeAddAndEdit() {
      this.showAddFlag = false
      this.form.deviceName = ''
      this.form.deviceSecret = ''
      this.form.productId = ''
      this.form.groupId = ''
      this.form.id = null
    },
    toRemove(row) {
      confirmWarning('删除操作', `确定删除主板 ${row.deviceName} ？`, () => {
        iotdeviceRemove({ids: row.id}).then(res => {
          this.query()
          msgSuccess()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }
}
</style>
